<template>
  <div>
    <van-row class="head-bg">
      <van-col span="24" class="bg">
        <div class="head-right">
          <router-link to="/setting">设置</router-link>
          <router-link to="/msg"><span v-if="formData.isNew"></span> 消息</router-link>
        </div>
      </van-col>
      <van-col class="head-cont">
        <div class="user-photo">
          <img :src="user_info.headImages" alt="" v-if="user_info.headImages">
          <img src="../../assets/logo.png" alt="" v-else>
        </div>
        <div class="nikName-warp">
          <p @click="gologin">{{ user_info.nickName ? user_info.nickName : "未登录" }}</p>
          <span>{{ user_info.mobile ? formatPhoneNumber(user_info.mobile) : "登录后可查看你的数字藏品" }}</span>
        </div>
      </van-col>
    </van-row>
    <van-row class="money-warp">
      <van-col class="balance" span="24">
        <span>余额：{{ numFilter(user_info.integral) }}</span><span>冻结金额：{{ numFilter(user_info.frozenIntegral) }}</span>
      </van-col>
      <van-col span="24">
        <van-row justify="space-between" class="account-set">
          <van-col span="12" class="betten">
            <router-link to="/balance">余额详情 ></router-link>
            <router-link to="/setPay">收款设置 ></router-link>
          </van-col>
          <van-col span="12" class="acc-btn">
            <van-button type="primary" to="/recharge">去充值</van-button>
            <van-button type="primary" to="/Withdrawal">去提现</van-button>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <van-row class="">
      <van-col class='col-5' v-for="(item, index) in menuList" :key="index" @click="$router.push(item.to)">
        <img :src="item.image" alt="">
        <span>{{ item.name }}</span>
      </van-col>
    </van-row>
    <div class="cell-warp">
      <van-cell is-link v-for="(item, index) in LinkList" :key="index" :title="item.name" :to="item.to">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img :src="item.image" alt="">
        </template>
      </van-cell>
    </div>
    <!-- <div class="suport">
      <img src="../../assets/image/eth.png" alt="">
      <span>提供技术支持</span>
    </div> -->
    <!-- <div class="recordNo">苏ICP备2022028288号</div> -->
  </div>
  <van-popup v-model:show="formData.show" :style="{ background: 'none' }" :close-on-click-overlay="false">
    <div class="containt">
      <p>设置登录密码</p>
      <van-field v-model="formData.password" :type="formData.passwordType" name="密码" placeholder="密码（8~16位字符）">
        <template #right-icon>
          <span class="solts" @click="switchPasswordType">
            <van-icon name="eye" v-if="formData.passwordType === 'password'" />
            <van-icon name="closed-eye" v-else />
          </span>
        </template>
      </van-field>
      <div class="flex">
        <van-button class="block_btn" @click="cancel">稍后设置</van-button>
        <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="submit">确认</van-button>
      </div>
    </div>
  </van-popup>
  <div class="Record">
    <span  @click="Hyperlinks('https://beian.miit.gov.cn/#/home')">粤ICP备2021117837号-3 </span>
      <span>增值电信业务经营许可证：粤B2-20220326</span>
      <span>艺术品经营单位备案：440304180035</span>
      <span @click="Hyperlinks('http://kuancomm.com/')">Copyright © kuanqing.art 2022 - 2026 公司介绍与联系方式 </span>
  </div>
</template>
<script>
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick, computed } from "vue";
import { useStore } from "vuex";
import { Toast } from "vant";
import { useRouter, onBeforeRouteUpdate } from "vue-router"
import { formatPhoneNumber, stringNum } from "@/utils/phone";
import { getIsNew, editPassword, } from "@/api/public";
export default {
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const onload = async () => {
      await store.dispatch('user/getUserAll')
    }
    const menuList = reactive([
      {
        name: "我的订单",
        to: "/order",
        image: require("@/assets/image/icon/order.png")
      },
      {
        name: "申购抽签",
        to: "/apply",
        // apply
        image: require("@/assets/image/icon/draw.png")
      },
      {
        name: "合成藏品",
        to: "/compose",
        image: require("@/assets/image/icon/sys.png")
      },
      {
        // Giftrecord
        name: "赠与记录",
        to: "/Giftrecord",
        image: require("@/assets/image/icon/gifti.png")
      },

    ])
    const LinkList = reactive([
      {
        name: "邀请好友",
        to: "/invite",
        // /invite
        image: require("@/assets/image/icon/invate.png")
      },
      {
        name: "空投兑换",
        to: "/Airdrop",
        // /Airdrop
        image: require("@/assets/image/icon/change.png")
      },
      {
        name: "我的客服",
        to: "/customer",
        image: require("@/assets/image/icon/serve.png")
      },
      {
        name: "关于我们",
        to: "/about",
        image: require("@/assets/image/icon/about.png")
      },

    ])
    const gologin = () => {
      if (!localStorage.getItem('token')) {
        router.push('/login')
      }
    }
    const numFilter = (value) => {
      const realVal = parseFloat(value ? value : 0).toFixed(2);
      return realVal;
    }
    router.beforeEach((to, from, next) => {
      if (from.path == "/codelogin") {

      }
      next()

    })
    const switchPasswordType = () => {
      formData.passwordType = formData.passwordType === 'password' ? 'text' : 'password'
    }
    const cancel = () => {
      localStorage.setItem('falg', false)
      formData.show = false
    }

    const Hyperlinks = (url) => {
      window.open(url)
    }
    const formData = reactive({
      show: false,
      password: "",
      passwordType: "password",
      loading: false,
      isNew: false
    })
    const submit = async () => {
      let num = stringNum(formData.password)
      var re = /^(?=.*[a-z])|(?=.*\d)[^]{8,16}$/;//包含字母
      var result = re.test(formData.password);
      if (!result) {
        return Toast('请输入密码（8~16位字符）')
      }
      const data = {
        password: formData.password
      }
      const res = await editPassword(data)
      if (res.data.success) {
        Toast(res.data.message)
        formData.show = false
      } else {
        Toast(res.data.message)
      }
    }
    onMounted(() => {
      onload()
      localStorage.setItem('code', store.getters.user_info.invitationCode)
      console.log(store.getters.user_info.invitationCode, "有病")
      if (store.getters.user_info.mobile) {
        console.log('弹窗', "store.getters.user_info.password")
        if (!store.getters.user_info.password) {
          formData.show = true
          console.log('弹窗', "store.getters.user_info.password")
          localStorage.setItem('falg', false)
        }
      }
      getIsNew().then((res) => {
        console.log(res.data.data)
        formData.isNew = res.data.data
      })
    })
    return {
      submit,
      cancel,
      switchPasswordType,
      gologin,
      LinkList,
      user_info,
      formatPhoneNumber,
      menuList,
      numFilter,
      formData,
      Hyperlinks
    }
  }
}
</script>
<style lang="less" scoped>
.containt {
  .block_btn {
    width: 240px;

    background: #7d8184;
    border-radius: 44px;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
  }

  .flex {
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .block_gradual {
      width: 240px;
    }
  }

  padding: 20px;
  width: 580px;
  height: 428px;
  background: #282a2c;
  border: 1px solid #ffffff;
  border-radius: 13px;

  &:deep(.van-field::-webkit-input-placeholder) {
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #b9c4c7;
    line-height: 48px;
    opacity: 0.6;
  }

  &:deep(.van-field) {
    height: 82px;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-radius: 10px;
    margin-top: 60px;
  }

  p {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin: 30px 0px;
    text-align: center;
  }
}

.suport {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  align-items: center;

  img {
    width: 100px;
    height: 30px;
    margin-right: 20px;
    vertical-align: middle;
  }

  span {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
    line-height: 48px;
  }
}

.cell-warp {
  &:deep(.van-cell__title) {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  margin-top: 50px;

  img {
    width: 8%;
    height: 8%;
    vertical-align: middle;
    margin-right: 30px;
  }

  &:deep(.van-cell--clickable) {
    background: transparent;
  }

  &:deep(.van-cell:after) {
    border-bottom: 0px;
  }
}

.head-bg {
  position: relative;
  width: 750px;
  height: 509px;
  background: url(../../assets/image/logo.jpg) no-repeat;
  background-size: 100% 100%;

  .bg {
    position: relative;
    // background-image: url('../../assets/image/mebg.png');
    background-repeat: no-repeat;
    background-size: 569px 232px;
    background-position: 90px 80px;

    .head-right {
      position: absolute;
      right: 0px;
      top: 80px;
      display: flex;
      flex-direction: column;

      a {
        background: #7d8184;
        border-radius: 30px 0px 0px 30px;
        margin-bottom: 20px;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 48px;
        text-align: right;
        padding: 10px 20px 10px 80px;
        position: relative;
      }

      a:nth-child(1) {
        display: block;
        background-size: 40px 40px;
        background-position: 25px 14px;
        background-image: url('../../assets/image/icon/set.png');
        background-repeat: no-repeat;
      }

      a:nth-child(2) {
        display: block;
        background-size: 40px 36px;
        background-position: 25px 16px;
        background-image: url('../../assets/image/icon/msg.png');
        background-repeat: no-repeat;
      }

      span {
        display: block;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        right: 55%;
      }
    }
  }

  .head-cont {
    display: flex;
    align-items: center;
    padding: 40px 30px;

    .nikName-warp {
      padding-left: 20px;

      p {
        font-size: 34px;
        color: #ffffff;
        line-height: 48px;
        font-family: Source Han Sans CN;
      }

      span {
        font-size: 24px;
        color: #ffffff;
        line-height: 48px;
        font-family: Source Han Sans CN;
      }
    }

    .user-photo {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;

      img {
        width: 100%;
      }
    }

    width: 708px;
    position: absolute;

    left: 20px;
    border: 2px solid #ffffff;
    background: linear-gradient(0deg, #161718 0%, rgba(75, 76, 77, 0.5) 100%);
    border-radius: 20px;
    border-radius: 20px;
    bottom: 40px;
  }
}

.money-warp {
  padding: 30px 20px 0px;

  .acc-btn {
    padding-left: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &:deep(.van-button) {
      width: 150px;
      height: 58px;
      background: linear-gradient(90deg, #f4c362, #ffda83);
      border-radius: 29px;
      border: none;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #282a2c;
    }
  }

  .account-set {
    .betten {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .balance {
    display: flex;
    align-items: center;

    span {
      font-size: 34px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #444442;
      line-height: 48px;
    }

    span:nth-child(2) {
      margin-left: 60px;
    }
  }

  margin: 0px 20px;
  height: 188px;
  background: linear-gradient(90deg, #f0dbb2, #fef4d3);
  border-radius: 20px;
}

.col-5 {
  width: 162px;
  height: 162px;
  background: #282a2c;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-top: 30px;

  img {
    width: 30%;
  }

  span {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
    margin-top: 10px;
  }
}

.recordNo {
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #999;
  line-height: 48px;
  letter-spacing: 3px;
}

.Record {
  line-height: 48px;
  width: 100%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;

  a {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    margin: 0 auto;
  }

  span {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }
}
</style>